<template>
    <div class="big">
        <div class="head">
            <div class="time">
                {{ dateYear }} {{ dateWeek }}
                <span>{{ dateDay }}</span>
            </div>
            <div>带班信息</div>
            <div class="exit" @click="notFull" v-if="tNo == null">
                <span>退出</span>
            </div>
        </div>
        <div class="echarts">
            <div class="echart person-info">
                <div class="echart-title">个人信息</div>
                <div class="info">
                    <img src="../../../assets/big/fdy-avatar.png" alt="">
                    <div class="right">
                        <p>姓名:{{ userInfo.userName }}</p>
                        <p>工号：{{ userInfo.userNo }}</p>
                        <div class="classes">
                            <p>我的班级:</p>
                            <div v-for="(item, index) in classList" :key="index">
                                <p>{{ item.class_name }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="echart">
                <div class="echart-title">班级综合素质评分</div>
                <div id="quality"></div>
            </div>
            <div class="echart">
                <div class="echart-title">班级人数分布</div>
                <div class="class-num">
                    <table>
                        <tbody>
                            <tr>
                                <td>班级名称</td>
                                <td>总人数</td>
                                <td>男</td>
                                <td>女</td>
                            </tr>
                            <tr v-for="(item, index) in classList" :key="index">
                                <td>{{ item.class_name }}</td>
                                <td>{{ item.total }}</td>
                                <td>{{ item.sexM }}</td>
                                <td>{{ item.sexW }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
            <div class="echart">
                <div class="echart-title">各班级请假人数分布</div>
                <div id="leave"></div>
            </div>
            <div class="echart">
                <div class="echart-title">学生处分信息</div>
                <table class="stu-punishment-info">
                    <tbody>
                        <tr>
                            <td>姓名</td>
                            <td>班级名称</td>
                            <td>学号</td>
                            <td>详情</td>
                        </tr>
                        <tr v-for="(item, index) in disciplinaryList" :key="index">
                            <td>{{ item.stuName }}</td>
                            <td>{{ item.className }}</td>
                            <td>{{ item.stuNo }}</td>
                            <td class="more">查看详情></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="echart">
                <div class="echart-title">学生入住分布情况</div>
                <div id="stu-checkIn"></div>
            </div>
        </div>
    </div>
</template>
<script>
import { nowTime } from '../../../utils/index.js';
import { listClass, getClassDisciplinaryNumber, getFdyClassLeaveNumber, getClassLeaveNumber, countFdyHisAsClass } from "@/api/stuCQS/basedata/big";

export default {
    props: {
        tNo: {
            type: String
        }
    },
    data() {
        return {
            timing: null,
            dateDay: null,
            dateYear: null,
            dateWeek: null,
            weekday: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                majorId: null,
                className: null,
                deptId: null,
                status: null,
                gradeId: null,
            },
            userInfo: {
                userName: null,
                userNo: null
            },
            //班级数据
            classList: [],
            //请假数据
            leaveList: [],
            //班级处分人数
            disciplinaryList: []
        }
    },
    created() {
        this.timeFn();
        this.getClassList();
        this.classDisciplinaryNumber();

    },
    mounted() {
        if (this.tNo == null) {
            this.doFull();
        }
        this.qualityChart();
        this.leaveChart();
        this.stuCheckInChart();

        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        clearInterval(this.timing)
    },
    methods: {
        doFull() {
            this.$store.dispatch('app/toggleSideBarHide', true);
            document.querySelector('.navbar').style.display = "none";
            document.querySelector('.tags-view-container').style.display = "none";
        },
        notFull() {
            this.$store.dispatch('app/toggleSideBarHide', false);
            document.querySelector('.navbar').style.display = "block";
            document.querySelector('.tags-view-container').style.display = "block";
        },
        /** 查询班级信息列表 */
        getClassList() {
            if (this.tNo == null) {
                listClass().then(response => {
                    this.classList = response.data;
                    this.userInfo.userName = response.fdy.nickName;
                    this.userInfo.userNo = response.fdy.userName;
                });
            } else {

                countFdyHisAsClass(this.tNo).then(response => {
                    this.classList = response.data;
                    this.userInfo.userName = response.fdy.nickName;
                    this.userInfo.userNo = response.fdy.userName;
                });
            }

        },

        //查询班级处分人数
        classDisciplinaryNumber() {
            if (this.tNo == null) {
                getClassDisciplinaryNumber().then(res => {
                    this.disciplinaryList = res.data;
                });
            } else {

            }

        },

        createChart(chartId, option) {
            const chart = this.$echarts.init(document.getElementById(chartId));
            chart.setOption(option);
        },
        qualityChart() {
            const option = {
                tooltip: {
                    axisPointer: {
                        type: 'shadow'
                    },
                    legendHoverLink: true // 鼠标移动到图例上时显示完整名称
                },
                legend: {
                    pageIconColor: '#ffffff',  // 翻页按钮的颜色
                    pageTextStyle: {
                        color: '#ffffff'  // 翻页文本的颜色
                    },
                    pageIconInactiveColor: '#aaa',
                    type: 'scroll',
                    data: ['2023级大数据技术2班', '2023级大数据技术1班', '2022级数字媒体技术3班', '2021级计算机应用技术2班', '2021级计算机应用技术2班'],
                    bottom: 10,
                    left: 0,
                    icon: "circle",
                    textStyle: {
                        color: '#fff', // 设置图例字体颜色为白色
                        fontSize: 14,
                    }
                },
                radar: {
                    radius: '70%',
                    center: ['center', '45%'],
                    indicator: [
                        { name: '评优评先' },
                        { name: '贫困生' },
                        { name: '优秀毕业生' },
                        { name: '镜湖之星' },
                    ],
                    nameTextStyle: {
                        color: '#ffffff',
                        fontSize: 14
                    }
                },
                series: [
                    {
                        type: 'radar',
                        color: ["#5470C6", "#FAC858", "#FAC858", "#73C0DE", "#FC8452"],
                        label: {
                            show: true,
                            color: "#ffffff",
                        },
                        data: [
                            {
                                value: [5, 6, 8, 2],
                                name: '2023级大数据技术2班'
                            },
                            {
                                value: [1, 3, 4, 6],
                                name: '2023级大数据技术1班'
                            },
                            {
                                value: [2, 3, 4, 7],
                                name: '2022级数字媒体技术3班'
                            },
                            {
                                value: [1, 3, 4, 7],
                                name: '2021级计算机应用技术2班'
                            },
                            {
                                value: [0, 6, 8, 7],
                                name: '2021级计算机应用技术1班'
                            }
                        ]
                    }
                ]
            };
            this.createChart('quality', option);
        },
        async leaveChart() {
            let class_list = [];
            let per_list = [];
            let sick_list = [];
            if (this.tNo == null) {
                let res = await getClassLeaveNumber();
                if (res.code == 200) {
                    let data = [...res.data];
                    data.map(x => {
                        class_list.push(x.className);
                        per_list.push(x.personalLeaveCount);
                        sick_list.push(x.sickLeaveCount);
                    });
                }
            } else {
                let res = await getFdyClassLeaveNumber(this.tNo);
                if (res.code == 200) {
                    let data = [...res.data];
                    data.map(x => {
                        class_list.push(x.className);
                        per_list.push(x.personalLeaveCount);
                        sick_list.push(x.sickLeaveCount);
                    });
                }
            }

            const option = {
                legend: {
                    icon: "circle",
                    top: 12,
                    textStyle: {
                        color: '#fff', // 设置图例字体颜色为白色
                        fontSize: 12,
                    }
                },
                tooltip: {
                    axisPointer: {
                        type: 'shadow' // 设置为阴影
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [...class_list],
                    axisLabel: {
                        color: "white",
                        fontSize: 12,
                        rotate: 25,
                        formatter: function (value) {
                            if (value.length > 8) {
                                return value.substring(0, 6) + '...'; // 只显示前10个字符并添加省略号
                            } else {
                                return value;
                            }
                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: "white",
                        fontSize: 14,
                    },
                },
                series: [
                    {
                        name: '事假',
                        type: 'bar',
                        stack: 'total',
                        color: "#3E9DFF",
                        label: {
                            show: true,
                            color: "#fff"
                        },
                        data: [...per_list]
                    },
                    {
                        name: '病假',
                        type: 'bar',
                        stack: 'total',
                        color: "#EE6666",
                        label: {
                            show: true,
                            color: "#fff"
                        },
                        data: [...sick_list]
                    }
                ]
            }
            this.createChart('leave', option);
        },
        stuCheckInChart() {
            const option = {
                tooltip: {
                    axisPointer: {
                        type: 'shadow' // 设置为阴影
                    }
                },
                legend: {
                    icon: "circle",
                    type: 'scroll',
                    pageIconColor: '#ffffff',  // 翻页按钮的颜色
                    pageTextStyle: {
                        color: '#ffffff'  // 翻页文本的颜色
                    },
                    pageIconInactiveColor: '#aaa',
                    bottom: 0,
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 14
                    },
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['30%', '60%'],
                        center: ['center', '40%'],
                        label: {
                            formatter: function (params) {
                                return params.value + '人';
                            },
                            color: '#fff'
                        },
                        color: ['#FAC858', '#93BEFF', '#507AFC', '#EE6666', '#90CA74', '#097B38', '#9A60B4'],
                        avoidLabelOverlap: false,
                        data: [
                            { value: 10, name: '2021级计算机应用技术1班' },
                            { value: 50, name: '2021级计算机应用技术2班' },
                            { value: 48, name: '2021级计算机应用技术3班' },
                            { value: 23, name: '2021级计算机应用技术4班' },
                            { value: 50, name: '2021级计算机应用技术5班' }
                        ]
                    }
                ]
            }
            this.createChart('stu-checkIn', option);
        },
        handleResize() {
            this.$echarts.getInstanceByDom(document.getElementById('quality')).resize();
            this.$echarts.getInstanceByDom(document.getElementById('leave')).resize();
            this.$echarts.getInstanceByDom(document.getElementById('stu-checkIn')).resize();
        },
        timeFn() {
            this.timing = setInterval(() => {
                this.dateDay = nowTime(new Date(), 'HH: mm: ss')
                this.dateYear = nowTime(new Date(), 'yyyy-MM-dd')
                this.dateWeek = this.weekday[new Date().getDay()]
            }, 1000)
        },
    }
}
</script>

<style lang="scss" scoped>
html {
    font-size: 16px;
    /* 设置根字体大小为 16px */
}

.big {
    margin: 0px;
    background: url("~@/assets/big/bg.png") no-repeat;
    background-size: 100% 100%;
    min-height: 100vh;
    width: 100%;
    color: white;
    padding-bottom: 50px;

    .head {
        display: flex;
        padding: 10px 20px;
        justify-content: space-between;
        align-items: center;

        div:nth-child(1) {
            color: #45A2FF;
        }

        .time span {
            color: white;
        }

        div:nth-child(2) {
            font-size: 44px;
            font-weight: bold;
        }

        .exit {
            background: url("~@/assets/big/button.png") no-repeat;
            background-size: 100% 100%;
            width: 81px;
            height: 36px;
            cursor: pointer;
            text-align: center;
            line-height: 36px;
        }
    }

    .echarts {
        display: flex;
        padding: 0px;
        flex-wrap: wrap;

        .echart {
            width: 33.33%;
            height: 440px;
            background: url("~@/assets/big/border-left-one.png") no-repeat;
            background-size: 100% 100%;
            padding: 35px 0 35px 30px;

            .echart-title {
                border-left: 5px solid #45A2FF;
                padding-left: 5px;
                margin-left: 5px;
                font-size: 1.2rem;
            }

            #quality,
            #leave,
            #stu-checkIn {
                height: 90%;
                width: 95%;
            }
        }

        .person-info {
            display: flex;
            flex-direction: column;
            font-size: 1rem;

            .info {
                display: flex;
                // align-items: center;
                margin-top: 25px;
                height: 90%;

                img {
                    max-width: 30%;
                    height: auto;
                    margin: 30px 20px 0 20px;
                    align-self: flex-start;
                }

                .right {
                    flex: 1;
                    max-height: 90%;
                    overflow-y: auto;

                    &::-webkit-scrollbar {
                        display: none;
                    }

                    .classes {
                        height: 70%;
                        width:98%;
                        font-size: 0.8rem;

                        p {
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
        }

        .class-num {
            max-height: 91%;
            overflow-y: auto;

            table {
                width: 95%;
                margin-top: 30px;
                margin-left: 8px;
                border-collapse: collapse;
                font-size: 1.1rem;
            }

            &::-webkit-scrollbar {
                display: none;
            }

            tr {
                display: flex;
                line-height: 28px;

                td {
                    width: 50px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;

                    &:not(:first-child) {
                        text-align: center;
                        width: 60px;
                    }

                    &:first-child {
                        flex: 1;
                        margin-bottom: 5px;
                    }

                }
            }

            tr:first-child {
                color: #3E9DFF;
            }

            tr:not(:first-child) {
                font-size: 0.9rem;
            }
        }

        .stu-punishment-info {
            width: 95%;
            margin-top: 30px;
            margin-left: 8px;
            border-collapse: collapse;

            tr {
                display: flex;
                line-height: 28px;
                font-size: 1rem;

                .more {
                    font-size: 12px;
                    color: #3E9DFF;
                    cursor: pointer;
                }

                td {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;

                    &:nth-child(1) {
                        flex: 1;
                    }

                    &:nth-child(2) {
                        flex: 2.5;
                    }

                    &:nth-child(3) {
                        flex: 1.5;
                    }

                    &:nth-child(4) {
                        flex: 1;
                        text-align: center;
                    }

                }
            }

            tr:first-child {
                color: #fff;
                margin-bottom: 8px;
            }

            tr:not(:first-child) {
                font-size: 0.8rem;
            }
        }

    }
}
</style>